<template>
    <view class="container">
        <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
        <view class="search-view">
          <u-input v-model="queryParams.time" border="false" type="select"   placeholder="" suffixIcon="calendar"
          suffixIconStyle="color: #909399" class="search-input">  
          </u-input>
          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
        <u-transition :show="filterPanel" mode="fade">
          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
            <view class="filter-panel-content">
             
              <view class="select-header">开户日期</view>
            <view class="selcet-content" style="padding: 0 24rpx">
              <u-input
                :disabled="true"
                :disabledColor="'#fff'"
                class="dateInput"
                border="surround"
                v-model="queryParams.startTime"
                placeholder="请选择开始时间"
              >
                <template v-slot:suffix>
                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
                </template>
              </u-input>
              <u-input
                :disabled="true"
                :disabledColor="'#fff'"
                class="dateInput"
                border="surround"
                v-model="queryParams.endTime"
                placeholder="请选择结束时间"
              >
                <template v-slot:suffix>
                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
                </template>
              </u-input>
            </view>
            </view>
            <view class="btn-box">
              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
            </view>
            <u-datetime-picker
              :closeOnClickOverlay="true"
              :show="timeShow"
              v-model="time"
              mode="date"
              :minDate="-2209017600000"
              @close="openOrCloseDate"
              @cancel="openOrCloseDate"
              @confirm="confirm"
            ></u-datetime-picker>
          </view>
        </u-transition>
      </view>
      </u-sticky>
        <div class="app-container" style="overflow: auto">
        
    <div class="header-con" v-show ="oneCount>0" ref="searchHeightRef">
      <div class="item"  v-show ="oneCount>0">
        <img src="@/static/images/one.png" alt="" />
        <div class="info-sum">
          <div class="title">{{ oneName  }}</div>
          <div class="num">{{ oneCount }}<span>张</span></div>
        </div>
      </div>
      <div class="item" v-show ="twoCount>0">
        <img src="@/static/images/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">{{  twoName  }}</div>
          <div class="num">{{  twoCount }}<span>张</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show ="threeCount>0" ref="searchHeightRef">
      <div class="item"  v-show ="threeCount>0">
        <img src="@/static/images/one.png" alt="" />
        <div class="info-sum">
          <div class="title">{{threeName }}</div>
          <div class="num">{{ threeCount }}<span>张</span></div>
        </div>
      </div>
      <div class="item"   v-show ="fourCount>0">
        <img src="@/static/images/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">{{ fourName  }}</div>
          <div class="num">{{ fourCount }}<span>张</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show ="fiveCount>0" ref="searchHeightRef">
      <div class="item" v-show ="fiveCount>0">
        <img src="@/static/images/one.png" alt="" />
        <div class="info-sum">
          <div class="title">{{ fiveName  }}</div>
          <div class="num">{{ fiveCount }}<span>张</span></div>
        </div>
      </div>
    </div>
    <div></div>
  </div>
  <div style="margin:8px" v-show="listData.length>0">
    <button type="primary" style="margin-right:5px" size=mini>储蓄卡开卡统计</button>
  </div>
      <u-list  :spaceHeight="116" lowerThreshold="100">
        <u-list-item v-for="(item, index) in listData" :key="index">
          <view class="list-item">
            <view class="item-header">
              <u--text  lines="2" 
                :text="item.time+' 开卡：'+item.value+' 张 '" size="30rpx" color="#333333" ></u--text>
            </view>
            <view class="item-row">
            <text class="row-label">开卡明细：</text><br>
            <text class="row-value">{{ formatMultiLineData(item.detail)}}</text>
          </view>
          </view>
        </u-list-item>
        <view>
        </view>
      </u-list>
    </view>
    <!-- 悬停按钮返回工作台-->
      <suspend></suspend>
      <refresh></refresh>
  </template>
  
  <script setup>
  import { getOpenCardList } from '@/api/invest/statisticAnalysis'
    import dayjs from 'dayjs'
  import { timeHandler } from '@/utils/common.ts'
  import {onLoad,onShow} from "@dcloudio/uni-app";
      // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
  import {reactive ,toRefs,ref,computed }from "vue";
  const pageNum = ref(1)
  const listData = ref([])
  const isShow = ref(false)
  const accountsList = ref([])
  const timeShow= ref(false)
  const oneName= ref("")
  const oneCount= ref(0)
  const twoName= ref("")
  const twoCount= ref(0)
  const threeName= ref("")
  const threeCount= ref(0)
  const fourName= ref("")
  const fourCount= ref(0)
  const fiveName= ref("")
  const fiveCount= ref(0)
  const time =ref( Number(new Date()))
  const  flag= ref(true)
  const account = ref({
    amount: '',
  income: '',
  expenses: '',
  incomeCount: '',
  expensesCount: '',
  posExpensesCount: '',
  posExpenses: '',
  realExpenses: '',
  realExpensesCount: '',
  otherExpensesCount: '',
  acccountsList: []
})
  const data = reactive({
    filterPanel: false,
    queryAccountParams: {
    pageNum: 1,
    state: '1',
    pageSize: 100
  },
    queryParams: {
    type: 2,
    time: null,
    id: null
     } 
  })

  const { filterPanel, queryParams} = toRefs(data)
  const windowHeight = computed(() => {
              uni.getSystemInfoSync().windowHeight - 50
          })	
  onLoad(() => {
      getList()
    });
  
   onShow(() => {
      if (isShow.value) {
      listData.value=[]
        getList()
        isShow.value = false
      }
    });

    function formatMultiLineData(data) {
  if (data != null) {
    return data.replace(/<br\/>/g, '\n')
  }
}


function  openOrCloseDate(data) {
      timeShow.value = !timeShow.value
      flag.value = data
    }
    function confirm(e) {
      const date = timeHandler(new Date(e.value), '-', ':')
            let formatValue = 'YYYY-MM-DD'
            dayjs(date).format(formatValue)
      if (flag.value) {
        queryParams.value.startTime =  dayjs(date).format(formatValue)
      } else {
        queryParams.value.endTime =  dayjs(date).format(formatValue)
      }
      timeShow.value = false
    }
function searchSubmit() {
  queryParams.value.time = queryParams.value.startTime+'-'+queryParams.value.endTime 
      pageNum.value = 1
      listData.value = []
      getList()
      filterPanel.value = false
    }
    function resetQuery() {
        queryParams.value.id = ''
        queryParams.value.type = '2'
       queryParams.value.startTime = ''
        queryParams.value.time = ''
      queryParams.value.endTime =  ''
    }
  function getList() {
    getOpenCardList({...queryParams.value }).then(res => {
            account.value = { ...res.data }
          listData.value = listData.value.concat(res.data.tableDebitList)
          accountsList.value =  accountsList.value.concat(res.data.accountsList)
          if(accountsList.value.length>0){
           oneName.value= accountsList.value[0].name
           oneCount.value= accountsList.value[0].count
          }
          if(accountsList.value.length>1){
           twoName.value= accountsList.value[1].name
           twoCount.value= accountsList.value[1].count
          }
          if(accountsList.value.length>2){
           threeName.value= accountsList.value[2].name
           threeCount.value= accountsList.value[2].count
          }
          if(accountsList.value.length>=3){
           fourName.value= accountsList.value[3].name
           fourCount.value= accountsList.value[3].count
          }
          
        }).catch(() => {
        })
      }
  </script>
  
  <style lang="scss" scoped>

.app-container {
  .header-con {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      width: 50%;
      height: 100%;
      display: flex;
      position: relative;
      align-items: center;
      margin: 5px 10px 5px 10px;
      .title {
        margin-left: 5px;
        color: rgb(133, 133, 148);
        margin-bottom: 5px;
        font-size: 14px;
      }
      .num {
        margin-left: 5px;
        font-weight: bold;
        font-size: 14px;
      }
    }
    img {
      height: 30px;
      width: 30px;
    }
  }
  .header-title {
    width: 100%;
    height: 30px;
    background-color: #ffffff;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
  }
}
  .btnAdd {
        width: 146rpx;
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 8rpx;
        display:float;
        text-align: center;
      }
  
  .search-view {
    padding: 12rpx 32rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  
    .search-input {
      background: #F5F5F5;
      color: #333333;
      margin-right: 36rpx;
    }
  
    .filter-panel {
      width: 100%;
      position: absolute;
      left: 0;
      top: 96rpx;
      background-color: rgba(0, 0, 0, 0.5);
  
      .filter-panel-content {
        background-color: #ffff;
        padding: 0 30rpx 30rpx;
  
        .filter-title {
          color: #000000;
          font-size: 30rpx;
          font-weight: 500;
          padding: 30rpx 0;
        }
  
        .state-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
  
          .state-item {
            width: 210rpx;
            height: 72rpx;
            border: 1rpx solid rgba(0, 0, 0, 0.25);
            border-radius: 72rpx;
            text-align: center;
            line-height: 72rpx;
            margin: 0 20rpx 20rpx 0;
            font-size: 28rpx;
            color: #000000;
          }
  
          .active {
            background-color: rgba(222, 241, 255, 1);
            border: 1rpx solid rgba(22, 119, 255, 1);
          }
        }
      }
  
      .btn-box {
        display: flex;
        padding: 24rpx 30rpx;
        background-color: #fff;
        box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
      }
    }
  }
  
  .list-item {
    margin: 0 24rpx 24rpx;
    padding: 32rpx;
    background-color: #fff;
  
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 16rpx;
  
      .status {
        .status-item {
          width: 120rpx;
          height: 44rpx;
          text-align: center;
          line-height: 44rpx;
          border-radius: 4rpx;
          font-size: 24rpx;
        }
  
        .status1 {
          background: #F0F0F0;
          color: #8C8C8C;
        }
  
        .status2 {
          background: rgba(38, 129, 255, 0.2);
          color: #2681FF;
        }
  
        .status3 {
          background: #F7F7F7;
          color: #2681FF;
        }
  
        .status4 {
          background: rgba(255, 85, 51, 0.2);
          color: #FF5533;
        }
  
        .status5 {
          background: #F7F7F7;
          color: rgba(0, 0, 0, 0.85);
        }
  
        .status7 {
          background: rgba(255, 129, 51, 0.2);
          color: #FF8133;
        }
  
        .status8 {
          background: rgba(65, 217, 165, 0.2);
          color: #41D9A5;
        }
      }
    }
  
    .item-row {
      padding: 16rpx 0;
  
      .row-label {
        color: rgba(0, 0, 0, 0.55);
      }
  
      .row-value {
        color: rgba(0, 0, 0, 0.85)
      }
    }
  
    .operate {
      display: flex;
      justify-content: flex-end;
  
      .btn {
        width: 146rpx;
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 8rpx;
        margin-left: 5rpx;
        text-align: center;
      }
  
      .circulation {
        background: rgba(0, 0, 0, 0.04);
        margin-right: 24rpx;
        color: rgba(0, 0, 0, 0.85);
      }
  
      .filling {
        background: #2681FF;
        border-radius: 8rpx;
        color: #FFFFFF;
      }
    }
  }
  </style>